import React, { Component } from 'react'
import {nanoid} from 'nanoid'
// 引入prop-types 用于组件的props校验
import PropTypes from 'prop-types'
import './index.css'
export default class Header extends Component {

    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    // 新增任务操作
    // 当验证完用户输入无误后，调用父组件的函数，将新的任务更新到父组件的state上
    addTodo = (event)=>{
        const {keyCode,target} = event;
        if(keyCode !== 13) return
        if(target.value.trim() === ''){
            alert('输入不能为空');
            return
        } 
        // 将结果封装成一个对象
        const newTodo = {id:nanoid(),title:target.value,finished:false}
        this.props.addTodo(newTodo)
        // 清空文本框
        target.value='';
    }

    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.addTodo} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        )
    }
}
